<template>
  <div class="index">
    <!-- 模块1：轮播图 -->
    <template>
      <Carousel v-model="value" autoplay :autoplay-speed="3000">
        <!-- <Carousel v-model="value"> -->
        <CarouselItem>
          <div class="demo-carousel">
            <div class="carousel carouselOne">
              <!-- <img :src="banner" alt="" class="banner"> -->
              <!-- <div class="bannerText">
              <h1 class="bannerTitle animated bounceInRight">签署合同就是这么简单！</h1>
              <p class="bannerExp animated bounceInLeft">即时、安全地发送你最重要的文件。甚至在任何地方都可以签名。<br>快速响应提高你的效率。</p>
              <input type="button" value="免费注册" class="bannerRgister animated bounceInDown"> -->
              <div class="bannerText">
                <h1 class="bannerTitle">签署合同就是这么简单！</h1>
                <p class="bannerExp">即时、安全地发送你最重要的文件。甚至在任何地方都可以签名。<br>快速响应提高你的效率。</p>
                <Button class="bannerRgister" @click.native="registerfns">免费注册</Button>
              </div>
            </div>
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <div class="carousel carouselTwo"></div>
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <div class="carousel carouselThree"></div>
          </div>
        </CarouselItem>
      </Carousel>
    </template>
     模块2：让签约更安全 , 更快捷
    <div class="safe w1190">
      <h2 class="commonTitle">让签约更安全 , 更快捷</h2>
      <template>
        <Row>
          <i-col span="" class="safeIcon">
            <div class="iconBg text-center">
              <i class="iconfont icon-web iconImg"></i>
            </div>
            <p class="iconText">支持电脑网页，手机网页，微信，APP随时签约，查阅合同，高效协同。</p>
          </i-col>
          <i-col span="" class="safeIcon">
            <div class="iconBg text-center">
              <i class="iconfont icon-data iconImg"></i>
            </div>
            <p class="iconText">领先的信息运维机制严守数据安全；数据传输军用级别加密防止信息泄露。</p>
          </i-col>
          <i-col span="" class="safeIcon">
            <div class="iconBg text-center">
              <i class="iconfont icon-api iconImg"></i>
            </div>
            <p class="iconText">标准API接入，完美兼容系统，五孚签平台在线签署，满足个性化需求。</p>
          </i-col>
          <i-col span="" class="safeIcon">
            <div class="iconBg text-center">
              <i class="iconfont icon-law iconImg"></i>
            </div>
            <p class="iconText">严格遵守《电子签名法》相关规定，平台电子合同法律效力获得仲裁/司法机构认同。</p>
          </i-col>
        </Row>
      </template>
    </div>
    <!-- 模块3：丰富的行业应用场景 -->
    <div class="scene">
      <div class="w1190">
        <h2 class="commonTitle">丰富的行业应用场景</h2>
        <ul class="clearfix">
          <li class="secneList" v-for="(item,index) in sceneSorts" :key="index">
            <div class="bannerOuter">
              <img :src="item.img" alt="" class="banner">
              <div class="shade"></div>
            </div>
            <h3>{{item.title}}</h3>
          </li>
        </ul>
      </div>
    </div>
    <!-- 模块4：我们的客户 -->
    <!--<div class="customer">-->
      <!--<div class="w1190" style="position: relative;">-->
        <!--<h2 class="commonTitle">我们的客户</h2>-->
        <!--<div class="carousel text-center">-->
          <!--<template>-->
            <!--<swiper :options="swiperOption" ref="mySwiper">-->
              <!--<swiper-slide  v-for="(items,index) in swiper" :key="index"><img :src="items.bank" alt=""></swiper-slide>-->
            <!--</swiper>-->
          <!--</template>-->
          <!--<div class="swiper-button-prev" slot="button-prev"><i class="iconfont icon-arrow_l"></i></div>-->
          <!--<div class="swiper-button-next" slot="button-next"><i class="iconfont icon-arrow_r"></i></div>-->
        <!--</div>-->

      <!--</div>-->
    <!--</div>-->
  </div>
</template>
<style>
  /*@import "~static/css/animate.min.css";*/
</style>
<script>
  // 新增加swiper：
  // import { swiper, swiperSlide } from "vue-awesome-swiper";

  export default {
    // components: {
    //   swiper,
    //   swiperSlide
    // },
    data() {
      return {
        //模块1：轮播图
        value: 0,
        //模块3：图片
        sceneSorts: [
          {
            img: 'img/index/lingshou.png',
            title: "零售"
          },
          {
            img: 'img/index/jinrong.png',
            title: "金融"
          },
          {
            img: 'img/index/yiliao.png',
            title: "医疗"
          },
          {
            img: 'img/index/baoxian.png',
            title: "保险"
          }
        ],
        //模块4：图片
        swiper: [
          { bank: 'img/index/bank1.jpg' },
          { bank: 'img/index/bank2.jpg' },
          { bank: 'img/index/bank3.jpg' },
          { bank: 'img/index/bank4.jpg' },
          { bank: 'img/index/bank5.jpg' },
          { bank: 'img/index/bank2.jpg' },
          { bank: 'img/index/bank3.jpg' },
          { bank: 'img/index/bank4.jpg' },
          { bank: 'img/index/bank5.jpg' }
        ],
        //我们的客户轮播图配置
        swiperOption: {
          loop: true,
          autoplay: 2000,
          initialSlide: 0,
          slidesPerView: 5,
          spaceBetween: 20,
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
          },
          autoplayDisableOnInteraction: false
          // observer: true,
          // observeParents: true
        }
      };
    },
    methods: {
      registerfns() {
        let ths = this;
        ths.$router.push("/register");
      }
    }
  };
</script>
<!--<style lang="scss">-->
  <!--@import "~static/css/swiper.css";-->
<!--</style>-->

<style lang="less">
  .demo-carousel {
    background: #506b9e;
    height: 500px;
  }
  .index {
    //模块1：轮播图
    .ivu-carousel {
      .ivu-carousel-arrow.left {
        left: 10px !important;
        background: transparent;
        font-size: 26px;
        opacity: 0.5;
        &:hover {
          opacity: 1;
        }
      }
      .ivu-carousel-arrow.right {
        right: 10px !important;
        background: transparent;
        font-size: 26px;
        opacity: 0.5;
        &:hover {
          opacity: 1;
        }
      }
    }
    .ivu-carousel-dots-inside {
      bottom: 30px;
    }
    .ivu-carousel-dots li {
      &.ivu-carousel-active {
        button {
          background: #eb3437;
          opacity: 1;
        }
      }
      button {
        width: 38px;
        height: 8px;
        background: #cbcbcb;
        opacity: 0.5;
      }
    }

    .carousel {
      position: relative;
      height: 100%;
      .banner {
        width: 100%;
      }
      .bannerText {
        position: absolute;
        top: 140px;
        left: 50%;
        margin-left: -595px;
        color: #ffffff;
        .bannerTitle {
          font-size: 3rem !important;
          line-height: 34px;
          font-weight: 400px;
        }
        .bannerExp {
          font-size: 2rem;
          line-height: 26px;
          margin: 50px 0;
        }
        .bannerRgister {
          width: 180px;
          height: 60px;
          font-size: 2rem;
          color: #ffffff;
          border-radius: 5px;
          background: #e65054;
          cursor: pointer;
          border: none;
          &:hover {
            border: none;
          }
        }
      }
    }
    .carouselOne {
      background: url("~static/img/index/banner.png") center center;
    }
    .carouselTwo {
      background: url("~static/img/product/productBanner.png") center center;
    }
    .carouselThree {
      background: url("~static/img/about/aboutBanner.png") center center;
    }
    //模块2：让签约更安全 , 更快捷
    .safe {
      padding: 60px 0 52px 0;
      .ivu-row {
        padding-top: 60px;
        overflow: hidden;
        .safeIcon {
          height: 200px;
          width: 297.5px;
          padding: 0 20px;
          float: left;
          .iconBg {
            width: 120px;
            height: 120px;
            margin: 0 auto 29px auto;
            background: #f1575b;
            border-radius: 50%;
            line-height: 130px;
            transition: all 0.5s;
            -webkit-transition: all 0.5s;
            -ms-transition: all 0.5s;
            .iconImg {
              margin: 0 auto;
              font-size: 100px;
              line-height: 120px;
              color: #fff;
            }
            &:hover {
              border-radius: 50%;
              background: #fff;
              box-shadow: 0 10px 10px #e8e8e8;
              -webkit-transform: translateY(-10px);
              -moz-transform: translateY(-10px);
              -ms-transform: translateY(-10px);
              -o-transform: translateY(-10px);
              transform: translateY(-10px);

              .iconImg {
                color: #f1575b;
              }
            }
          }
          .iconText {
            font-size: 1.4rem;
            color: #3a3a3a;
            line-height: 16px;
          }
          &:nth-child(3) {
            .iconImg {
              font-size: 120px;
            }
          }
        }
      }
    }
    //模块3：丰富的行业应用场景
    .scene {
      background: #e9eaeb;
      padding: 60px 0 50px 0;
      overflow: hidden;
      .secneList {
        margin: 60px 74px 0 0;
        float: left;
        &:last-child {
          margin-right: 0;
        }
        .bannerOuter {
          width: 242px;
          height: 162px;
          overflow: hidden;
          position: relative;
          .shade {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #434445;
            opacity: 0.5;
            transition: all 1s ease;
            transition-delay: 0s;
            transition-duration: 0.3s;
            transition-property: opacity;
            transition-timing-function: ease-in;
            z-index: 200;
          }
          img {
            border: 1px solid #eeeeee;
            transition: all 1s ease;
            cursor: pointer;
            transition-delay: 0s;
            transition-duration: 1s;
            transition-property: all;
            transition-timing-function: ease;
            z-index: 1;
          }
          &:hover {
            img {
              transform: scale(1.2, 1.2);
            }
          }
        }
        h3 {
          font-size: 2rem;
          color: #3a3a3a;
          line-height: 22px;
          margin-top: 20px;
        }
      }
    }
    //模块4：我们的客户
    .customer {
      padding: 60px 0 52px 0;
      // 新增加swiper：
      .swiper-slide {
        img {
          width: 175px;
          margin: auto;
        }
      }
      .swiper-button-prev {
        left: -25px;
        text-align: center;
        line-height: 44px;
        background: none;
        i {
          font-size: 40px;
          &:hover {
            color: #e8272b;
          }
        }
      }
      .swiper-button-next {
        right: -10px;
        text-align: center;
        line-height: 44px;
        background: none;
        i {
          font-size: 40px;
          &:hover {
            color: #e8272b;
          }
        }
      }
      .carousel {
        margin-top: 60px;
        position: relative;
      }
    }
  }
</style>


